<template>
	<el-dialog title="设置密码" v-model="isShowDialog" width="450px" :close-on-click-modal="false"
		:close-on-press-escape="false">
		<el-form :model="ruleForm"   label-width="120px" ref="userForm" size="default">
			<el-row :gutter="35">
				<el-input v-model="ruleForm.ID" type="hidden"></el-input>
				<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
					<el-form-item label="账号名">
						<el-input v-model="ruleForm.AccountName" readonly>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
					<el-form-item label="密码" required :rules="[{ required: true, message: '请输入密码'} ]" prop="Password">
						<el-input v-model="ruleForm.Password" placeholder="请输入密码" type="text" clearable>
						</el-input>
					</el-form-item>
				</el-col>

			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit(userForm)" size="default"> 提交 </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
	import {
		reactive,
		toRefs,
		onMounted,
		ref,
	} from 'vue';
	import {
		setPassAPI
	} from '/@/api/users/index';
	import {
		ElForm,
		ElMessage
	} from 'element-plus';
	export default {
		name: 'UserForm',
		setup() {
			type FormInstance = InstanceType < typeof ElForm > ;
			const userForm = ref < FormInstance > ();
			const state = reactive({
				isShowDialog: false,
				ruleForm: {
					ID: '0',
					AccountName: '',
					Name: '',
					MobileTelephone: '',
					Email: '',
					QQ: '',
					Wechat: '',
				},

			});
			// 打开弹窗
			const openDialog = (model: Object, callback: Function) => {
				state.ruleForm = model;
				state.isShowDialog = true;
				state.callback = callback;
				userForm.value.resetFields();
			};
			// 关闭弹窗
			const closeDialog = () => {
				state.isShowDialog = false;
			};
			// 取消
			const onCancel = () => {
				closeDialog();
			};

			const onSubmit = (formEl: FormInstance | undefined) => {
				if (!formEl) return
				formEl.validate((valid) => {
					if (valid) {
						//console.log('submit!')
						setPassAPI(state.ruleForm).then(async (response) => {
							//console.log(response);
							if (response['code'] === 0) {
								if (state.callback) {
									state.callback();
								}
								ElMessage.success(`${response.message}`);
								closeDialog();
							}


						});
					} else {

						return false
					}
				})
			};

			// 页面加载时
			onMounted(() => {

			});

			return {
				userForm,
				openDialog,
				closeDialog,
				onCancel,
				onSubmit,
				...toRefs(state),
			};
		},
	};
</script>
